<template>
  <div class="company-select">
    <Select
      ref="selectRef"
      filterable
      multiple
      placeholder="品牌商选择"
      :max-tag-count="tagCount || 2"
      :value="companyId"
      @on-change="valueChanged"
      @on-query-change="(name) => bloc.load(name)"
    >
      <Option
        v-for="item in bloc.paged.items"
        :value="item.id"
        :key="item.id"
        >{{ item.name }}</Option
      >
    </Select>
  </div>
</template>
<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { CompanySelectorBloc } from '@/component/bloc/CompanySelectorBloc';
import { isEmpty } from '@/base/util/Strings';

@Component
export default class UserSelector extends Vue {
  @Prop({ type: Array })
  readonly companyId!: Array<number>;

  @Prop({ type: Number })
  readonly tagCount!: number;

  bloc = new CompanySelectorBloc();

  mounted() {
    this.bloc.load('');
  }

  valueChanged(value) {
    this.$emit('on-change', value);
  }
}
</script>

<style lang='less'>
</style>
